<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";

import OrderDetail from "@/views/OrderDetail.vue";

const activeName = ref('0')
const orders = ref([])

const orderStatus = ref({
  '0': '全部订单', '1': '待付款','2': '待发货', '3': '待收货',
  '4': '待评价', '5': '退款中','6': '售后中', '7': '已取消',
  '8': '已退货', '9': '已收货'
})

// 点击tabPane，要根据不同的状态查询订单列表
const handleClick = (tab)=> {
  debugger
  //查询不同的状态
  loadOrdersByStatus(tab.props.name);
}

//加载指定状态的订单
const loadOrdersByStatus = (status)=>{
  axios.get(`/order/loadOrdersByStatus?status=${status}`).then(resp => {
    orders.value = resp.data;
  })
}

onMounted(()=>{
  //加载全部订单
  loadOrdersByStatus('0');
})
</script>


<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!--  显示所有订单的状态 -->
        <el-tab-pane :label="value" :name="key"
                     v-for="(value,key,index) in orderStatus" :key="index">
            <!-- 订单详情子组件-->
            <OrderDetail :orders="orders"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style scoped>

</style>
